<template>
  <div>
    <van-tabbar v-model="active" active-color="#FF8B57" inactive-color="#A0A3A6" v-if="this.$store.state.tabbar">
      <van-tabbar-item v-for="(item,index) in tabbars" :key="index" @click="onClick(item.name)">
        <span>{{item.title}}</span>
        <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import URL from 'url'
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      tabbars: [
        {
          name: "/home/nowplaying",
          title: "电影",
          normal: "",
          active: ""
        },
        {
          name: "/cinema",
          title: "影院",
          normal: "",
          active: ""
        },
        {
          name: "/message",
          title: "资讯",
          normal: "https://mall.s.maizuo.com/mzmovie-icon-news-42x42-gray.png",
          active: "https://mall.s.maizuo.com/mzmovie-icon-news-42x42-gray.png"
        },
        {
          name: "/center",
          title: "我的",
          normal: "",
          active: ""
        }
      ]
    };
  },
  mounted(){
    this.$store.commit("setTab",true)
  },
  // 通过路由跳转判断选中的样式
  // created() {
  //   var url = window.location.href;
  //   var basename = URL.parse(url);
  //   console.log(basename);
  //   if (basename.path == "/home/comingsoon||/home/nowPlaying") {
  //     this.active = 0;
  //   } else if (basename.path == "/cinema") {
  //     this.active = 1;
  //   } else if (basename.path == "/face") {
  //     this.active = 2;
  //   } else if (basename.path == "/preson") {
  //     this.active = 3;
  //   }
  //   console.log(this.active);
  // },
  methods:{
    //点击跳转，设置Vuex中show的值
    onClick(e){
      this.$store.commit('setState',false);
      setTimeout(()=>{
        this.$router.push({ path: e});
        this.$store.commit('setState',true)
      },500)
    }
  }
};
</script>

<style scoped>
.van-tabbar {
	border-top: 1px solid #f5f5f5;
}
</style>
